<template>
	<view>
		<!-- 状态栏 -->
		<view class="status" :style="{ height: this.$store.state.statusHight + 'px' }"></view>
		<!-- 头部导航栏 -->
		<view class="header flex">
			<view class="item" @click="Isshow = true">取消</view>
			<view class="title">游记</view>
			<view class="item" @click="upload">发表</view>
		</view>
		<!-- 游记类型 -->
		<view class="travel_type flex ">
			<view class="type_header">游记类型</view>
			<view class="content" @click="(show = true)">{{ params.category }}</view>
		</view>
		<!-- 游记内容 -->
		<view class="travel_content">
			<view class="header">游记内容</view>
			<view class="content"><u-input type="textarea" height="240" v-model="postContent"></u-input></view>
		</view>
		<!-- 上传图片 -->
		<view class="upload travel_content">
			<view class="header">上传图片</view>
			<view class="uploads ">
				<u-upload
					ref="uUpload"
					:width="160"
					:height="160"
					:action="action"
					:auto-upload="false"
					:max-count="3"
					@on-error="errorbu"
					@on-success="successbu"
					@on-uploaded="submit"
				></u-upload>
			</view>
		</view>
		<!-- 消息提示 -->
		<u-toast ref="uToast"></u-toast>
		<!-- 弹框选择 -->
		<u-action-sheet :list="list" v-model="show" @click="changeType"></u-action-sheet>
       <u-modal v-model="Isshow"  show-cancel-button @confirm="back">
			<view class="slot-content" style="font-size: 28rpx;padding: 0 24rpx;line-height: 72rpx;">
				你将会取消该游记的发布，是否继续?
			</view>
		</u-modal>		
	</view>
</template>

<script>
import { sendtravel } from '../../api/travel.js'
import { utf16toEntities } from '../../utils/emjoy.js'
export default {
	data() {
		return {
			action: 'http://111.75.252.147:8888/app/scenic/picUpload',
			type_name: '海边',
			show: false,
			Isshow: false,
			postContent: '',
			params: {
				picture:'',
				postContent: '',
				userId: '',
				category: '遗址'
			},
			list: [
				{
					text: '遗址',
					color: '#13c2c2',
					fontSize: 28
				},
				{
					text: '乡村',
					fontSize: 28,
					color: '#999'
				},
				{
					text: '都市',
					fontSize: 28,
					color: '#999'
				},
				{
					text: '其他',
					fontSize: 28,
					color: '#999'
				}
			]
		};
	},
	methods: {
		// 图片上传失败
		errorbu(res) {
			this.$refs.uToast.show({
				type: 'warning',
				title: '图片上传失败,游记发布失败'
			});
		},
		// 图片上传成功
		successbu(res) {
			this.params.picture = this.params.picture + res.data.url + ';'
		},
		// 所有图片上传成功
		submit () {
			this.params.picture = this.params.picture.slice(0, this.params.picture.length -1)
			this.$refs.uToast.show({
				type: 'success',
				title: '图片上传成功'
			});
				this.sendTravel()
		},
		// 发布游记
		async sendTravel () {
			this.params.userId = this.$store.state.userinfo.userId,
			this.params.postContent = utf16toEntities(this.postContent)
			const res = await sendtravel(this.params)
			if (res.statusCode ==200) {
			this.$refs.uToast.show({
					type: 'success',
					title: '发布成功'
				});
				this.$store.dispatch('getUserInfo')
				this.back()
			} else {
				this.$refs.uToast.show({
					type: 'error',
					title: '发布失败'
				});
			}
		},
		// 返回上一级菜单
		back() {
			uni.navigateBack({
				delta: 1
			});
		},
		// 选择游记类型
		changeType(e) {
			this.list.map(item => {
				return (item.color = '#999');
			});
			this.list[e].color = '#13c2c2';
			this.params.category = this.list[e].text;
		},
		// 发表
		upload() {
			if (this.postContent == '') {
				this.$refs.uToast.show({
					title: '游记内容不能为空'
				});
			} else {
				this.$refs.uUpload.upload() 
			}
			
		}
	}
};
</script>

<style lang="less" scoped>
/* 头部操作栏 */
.header {
	background-color: #fff;
	padding: 0 18rpx;
	height: 92rpx;
	line-height: 92rpx;
	.item {
		width: 60rpx;
	}
	.title {
		width: 620rpx;
		text-align: center;
		font-size: 32rpx;
		font-weight: bolder;
	}
}
/* 旅游·目的地 */
.travel_type {
	padding: 0 24rpx;
	border-radius: 12rpx;
	margin-top: 30rpx;
	background-color: #fff;
	height: 112rpx;
	line-height: 112rpx;
	.content {
		margin-left: 60rpx;
	}
}
/* 旅游内容 */
.travel_content {
	margin-top: 30rpx;
	background-color: #fff;
	.header {
		border-bottom: 1rpx solid #fafafa;
	}
	.content {
		padding: 12rpx;
		text-indent: 2em;
	}
}
/* 图片上传 */
.uploads {
	padding: 12rpx 24rpx;
}
</style>
